<template>
	<div id="blog-detail">
		<div class="h1">
			<h1>{{obj.title}}</h1>
			<select v-model="style">
				<option>gitHub</option>
				<option>light</option>
				<option>dark</option>
				<option>oneDark</option>
			</select>
		</div>
		<MarkdownPreview :initialValue="obj.content" :theme="style"></MarkdownPreview>
	</div>
</template>

<script>
import { MarkdownPreview } from 'vue-meditor';
import { $get } from '@/puigins/request.js';
export default {
	created() {
		if (isNaN(this.$route.params.id)) {
			this.$message.error('isNaN');
		} else {
			$get('/article/getArticleById', { id: this.$route.params.id }).then(res => {
				// console.log(res);
				if(res.code==200){
					this.obj = res.data;
				}else{
					this.$msgError(res)
				}
				
			});
		}
	},
	components: {
		MarkdownPreview
	},
	data() {
		return {
			obj: {},
			style:'oneDark'
		};
	}
};
</script>

<style lang="scss">
	#blog-detail{
		.h1{
			padding: 20px 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
